<template>

    <!--筛选条件-->
    <div class="shaixuan2">
        <div style="margin-top: 15px;">
            <el-input placeholder="搜索关键词" v-model="input" class="input-with-select" style="width: 400px;">
                <el-select v-model="typeinput" slot="prepend" placeholder="请选择"  style="width: 130px;">
                    <el-option label="邀请助教名称" value="1"></el-option>
                    <el-option label="被邀请用户名称" value="2"></el-option>
                    <el-option label="被邀请用户手机号" value="3"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="searchtype"></el-button>
            </el-input>
            <el-button style="margin-left: 20px;"    @click="resetForm('searchinput')">重置</el-button>
            <PersButton type="text" size="mini" icon="el-icon-refresh" perms="sys:role:del" label="刷新" @click="refresh()"></PersButton>
        </div>
        <div class="first_table">
            <el-row>
                <el-col :span="24">
                    <div class="yixuan">已选 {{ multipleSelectioncount }} <el-button @click="piliangshanchu" type="text">批量删除</el-button></div>
                </el-col>
            </el-row>
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" width="55" header-align="center"></el-table-column>
                <el-table-column align="center" fixed  width="55" label="序号"  prop="id"></el-table-column>
                <el-table-column align="center" prop="tutor_nickname" label="邀请助教" header-align="center"></el-table-column>
                <el-table-column  align="center"  header-align="center" prop="nickname" label="被邀请用户头像">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.headimgurl" fit="fill" style="width: 60px;height: 60px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="nickname" label="被邀请用户昵称" header-align="center"></el-table-column>
                <el-table-column align="center" prop="phone" label="被邀请用户手机号" header-align="center"></el-table-column>
                <el-table-column align="center" prop="signin_time" label="进入直播间时间" header-align="center"></el-table-column>
                <el-table-column align="center" prop="signin_status" label="是否到课" header-align="center">
                    <template slot-scope="scope">
                        <span>
                            {{ scope.row.signin_status === 2 ? '是' : '否' }}
                        </span>
                </template>
                </el-table-column>
                <el-table-column align="center" prop="id" label="操作" header-align="center">
                    <template slot-scope="scope">
                        <PersButton type="text" size="mini" icon="el-icon-delete" perms="sys:role:del" label="删除" @click="del(scope.row)"></PersButton>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>


<script>


    import {getyaoqingzonglan,pldelyaoqing,delyaoqing} from '@/api/live/action';
    import PersButton from '@/components/PersButton';

    export default {
        components:{
            PersButton
        },
        data(){
            return {
                pageSize: 10, //一页显示多少条
                pageNumber: 1,
                total: 0, //总页数
                input:'',
                tableData:[],
                loading: false,
                multipleSelectioncount: 0,
                typeinput:'1',
            }
        },
        props:{
            liveId:{
                type:String,
                default:''
            },
        },
        created(){

            this.init();
        },
        methods: {
            refresh(e){
                this.init();
            },
            resetForm(formName) {
                this.input = '';
                this.zhujiao = '';
                this.online = '';
                this.init();
            },
            init(){
                let _param = {
                    input:this.input,
                    typeinput:this.typeinput,
                    liveId:this.$props.liveId,
                    pageSize:this.pageSize,
                    pageNumber:this.pageNumber
                }
                getyaoqingzonglan(_param).then((res) => {
                        if (res.code == 200) {
                            this.tableData = res.data.list;
                            this.total = res.data.total;
                        } else {
                            this.msgError(res.msg);
                        }
                    })
            },
            handleSizeChange: function (e) {
                console.log(e);
                this.pageSize = e;
                this.init();
            },
            handleCurrentChange: function (e) {
                console.log(e);
                this.pageNumber = e;
                this.init();
            },
            searchtype(e){
                this.init();
            },
            //已选
            handleSelectionChange: function (e) {
                console.log(e);
                let selectChang = []
                for (let item of e) {
                    selectChang.push(item.id)

                }
                this.multipleSelection = selectChang;
                this.multipleSelectioncount = selectChang.length;
                console.log(selectChang);
            },
            //批量删除
            piliangshanchu: function (e) {
                this.$confirm('确定批量删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let _param = {
                        liveId:this.$props.liveId,
                        ids: this.multipleSelection
                    }
                    pldelyaoqing(_param).then((res) => {
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.init();
                        } else {
                            this.msgError(res.msg);
                        }
                    })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            del: function (data) {
                this.$confirm('确定删除【' + data.nickname + '】吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let _param = {
                        liveId:this.$props.liveId,
                        id: data.id
                    }
                    delyaoqing(_param).then((res) => {
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.init();
                        } else {
                            this.msgError(res.msg);
                        }
                    })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        }
        
    }

</script>


<style>
.yixuan {
    margin: 20px;
    color: #787878;
}
</style>